<script setup>
import { Edit,Delete } from '@element-plus/icons-vue';
import { ref } from 'vue'
import { ElMessage ,ElMessageBox} from 'element-plus';
import {hotelManagement,setHotelInfo,updateHotelInfo,delHotelInfo} from '@/api/gongs.js'
// import {useKuYiStore} from '@/stores'

const HouseList = ref([]) //宾馆信息列表
const formModel=ref([])  //弹出框的数据 准备提交的数据
const total=ref(0) //总条数
const loading=ref(false) //loading状态
const dialogVisible=ref(false)// Dialog弹出框的状态
const isDialog=ref(false)// 管理弹出框是否是添加和编辑的
const formRef=ref(null)    
// const useStore = useKuYiStore() //引入pinia仓库

// 表单规则
const rules = {
  hname: [{ required: true, message: '请输入酒店名称', trigger: 'blur' }],
  rooms: [{ required: true, message: '请输入房间总数', trigger: 'blur' }],
  name: [{ required: true, message: '请输入经营人', trigger: 'blur' }],
  tel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  yyzz: [{ required: true, message: '请输入营业执照名称', trigger: 'blur' }],
  yno: [{ required: true, message: '请输入营业执照号码', trigger: 'blur' }],
  momo: [{ required: true, message: '请输入备注', trigger: 'blur' }],
};


// 确定表单
const onSubmit=async()=>{
    await formRef.value.validate() //预校验
    // 根据 isDialog 的值判断是添加还是编辑
    if (!isDialog.value) {
        // 添加逻辑
        // 提交 formModel.value 数据
        console.log(formModel.value);
        const res = await setHotelInfo(formModel.value)
        console.log(res);
        ElMessage.success('添加成功！')
        getArticleList()

    } else {
        // 编辑逻辑
        // 提交 formModel.value 数据
        await updateHotelInfo(formModel.value)
        ElMessage.success('修改成功！')
        getArticleList()
    }
  dialogVisible.value = false; // 关闭对话框
}

// 定期请求参数对象
const params=ref({
    action: 'list',
    page: 1,   //第几页
    perPage:30 //每页数量
})

// 根据后端代码渲染单元管理数据
const getArticleList = async () =>{
    try{
        loading.value = true //开启loading效果
        const res = await hotelManagement(params.value)
        console.log('接口返回的数据',res.data.data);
        HouseList.value = res.data.data
        total.value = res.data.data.length
        loading.value = false //关闭loading效果
    }catch(err){
        console.log(err);
    }
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.page=1
    params.value.perPage=size
    // 重新渲染
    getArticleList()
}

// 分页
const handleCurrentChange=(page)=>{
//     console.log('页码变化了',page);
//     params.value.page=page
//    // 重新渲染
//    getArticleList()
    params.value.page = parseInt(page, 10); // 确保转换为整数
    getArticleList(); // 重新加载数据
}

// 打开文章的对话框，进行新增加
    const onAddAritcle=()=>{
        // 管理弹出框是否是添加和编辑的
        isDialog.value=false
        // 打开弹出框
        dialogVisible.value=true
        // 这是添加房屋要进行清空数据原
        formModel.value=[]
    }



    // 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
    const onEditArticle=(row)=>{
        console.log(row);
        // 管理弹出框是否是添加和编辑的
        isDialog.value=true
        dialogVisible.value=true
        formModel.value = { ...row}; // 设置表单数据为当前行数据的副本
    }

// 删除单元的数据
const onDeleteArticle= async (row)=>{
    // 删除逻辑
    ElMessageBox.confirm( '您是否要删除该楼宇?','提示！',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',})
    .then(async() => {
        await delHotelInfo(row.id)
        ElMessage.success('删除成功！')
        getArticleList()
    })
}


</script>


<template>
      <page-container title="">
        
        <template #extra>
            <el-button type="primary" @click="onAddAritcle">添加宾馆</el-button>
        </template>

        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="HouseList" v-loading="loading">
            <el-table-column type="index" width="100" label="编号" />

            <el-table-column label="酒店名称" prop="roomnumber" >
                <template #default="{row}">
                    {{ row.hname }}
                </template>
            </el-table-column>

            <el-table-column label="房间总数" prop="building" >
                <template #default="{row}">
                    {{ row.rooms }}
                </template>
            </el-table-column>

            <el-table-column label="经营人" prop="element" >
                <template #default="{row}">
                    {{ row.name }}
                </template>
            </el-table-column>

            <el-table-column label="联系电话" prop="tierlimitL" >
                <template #default="{row}">
                    {{ row.tel }}
                </template>
            </el-table-column>



            <el-table-column label="经营执照名称" prop="user" >
                <template #default="{row}">
                    {{ row.yyzz }}
                </template>
            </el-table-column>

            <el-table-column label="经营执照号码" prop="information" >
                <template #default="{row}">
                    {{ row.yno }}
                </template>
            </el-table-column>

            <el-table-column label="备注" prop="area" >
                <template #default="{row}">
                    {{ row.momo }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.page"  
            v-model:page-size="params.perPage"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="total,  prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />
        </page-container>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" :title="!isDialog ? '添加宾馆':'编辑宾馆'" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formRef"  label-width="120px" label-position="left">

            <el-form-item label="酒店名称" prop="hname">
                <el-input v-model="formModel.hname" placeholder="请输入酒店名称"></el-input>
            </el-form-item>

            <el-form-item label="房间总数" prop="rooms">
                <el-input v-model="formModel.rooms" placeholder="请输入房间总数"></el-input>
            </el-form-item>

            <el-form-item label="经营人" prop="name">
                <el-input v-model="formModel.name" placeholder="请输入经营人"></el-input>
            </el-form-item>

            <el-form-item label="联系方式" prop="tel">
                <el-input v-model="formModel.tel" placeholder="请输入联系方式"></el-input>
            </el-form-item>

            <el-form-item label="营业执照名称" prop="yyzz">
                <el-input v-model="formModel.yyzz" placeholder="请输入营业执照名称"></el-input>
            </el-form-item>

            <el-form-item label="营业执照号码" prop="yno">
                <el-input v-model="formModel.yno" placeholder="请输入营业执照号码"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="momo">
                <el-input v-model="formModel.momo" placeholder="请输入备注"></el-input>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </span>
        </template>

    </el-dialog>

</template>

<style lang="scss" scoped>

</style>